<style lang="less">
@import '../../../styles/common.less';
</style>

<template>
  <Row>
    <Form  :label-width="300" inline>
      <div class='main_item'>
        <div @click="dataShow('financingAccountData')" id="moxx" class="main_item_title">
            <span style="font-weight:bold;" icon="md-arrow-dropdown">融资账户信息</span>
            <span style="float:right">
                <Icon type="md-arrow-dropdown" id="financingAccountData_icon"></Icon>
            </span>
        </div>
        <div id="financingAccountData" class="main_item_content_block">
            <div style="margin:30px 10px 10px 10px;">
              <FormItem label="合同ID" >
                <Input :disabled="true" v-model="financeAccount.loanId" placeholder="">
                </Input>
              </FormItem>
              <FormItem label="贷款产品" >
                <Input :disabled="true" v-model="financeAccount.productName" placeholder="">
                </Input>
              </FormItem>
              </br>
              <FormItem label="贷款金额" >
                <Input :disabled="true" v-model="financeAccount.loanAmt" placeholder="">
                </Input>
              </FormItem>
              <FormItem label="期数" >
                <Input :disabled="true" v-model="financeAccount.term" placeholder="">
                </Input>
              </FormItem>
              </br>
              <Table border :columns="financingAccountColumns" :data="financingAccountData" style="width: 100%;"></Table>
            </div>
        </div>
      </div>
      <div class='main_item'>
        <div @click="dataShow('updateData')" id="moxx" class="main_item_title">
            <span style="font-weight:bold;" icon="md-arrow-dropdown">更新信息</span>
            <span style="float:right">
                <Icon type="md-arrow-dropdown" id="updateData_icon"></Icon>
            </span>
        </div>
        <div id="updateData" class="main_item_content_block">
            <div style="margin:30px 10px 10px 10px;">
                <FormItem label="最后更新时间" >
                  <Input :disabled="true" v-model="financeAccount.updatedDate" placeholder="">
                  </Input>
                </FormItem>
                <FormItem label="最后更新用户" >
                  <Input :disabled="true" v-model="financeAccount.updatedBy" placeholder="">
                  </Input>
                </FormItem>
            </div>
        </div>
      </div>
      </Form>
  </Row>
</template>

<script>
export default {
  name: 'collection-deal-compent',
  data () {
    return {
      comptParams: {
        loanId: '',
        custIdNumber: ''
      },
      financeAccount: {
        customerId: '',
        status: '',
        principal: '',
        interest: '',
        consultingFee: '',
        managementFee: '',
        penaltyFee: '',
        lateFee: '',
        principalOs: '',
        interestOs: '',
        consultingFeeOs: '',
        managementFeeOs: '',
        penaltyFeeOs: '',
        lateFeeOs: '',
        updatedDate: '',
        updatedBy: ''
      },
      financingAccountColumns: [
        {
          key: 'typeCommon',
          align: 'center'
        },
        {
          title: '本金',
          key: 'principalCommon',
          align: 'center'
        },
        {
          title: '利息',
          key: 'interestCommon',
          align: 'center'
        },
        {
          title: '咨询费',
          key: 'consultingFeeCommon',
          align: 'center'
        },
        {
          title: '管理费',
          key: 'managementFeeCommon',
          align: 'center'
        },
        {
          title: '违约金',
          key: 'penaltyFeeCommon',
          align: 'center'
        },
        {
          title: '滞纳金',
          key: 'lateFeeCommon',
          align: 'center'
        }
      ],
      financingAccountData: []
    }
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },

  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
    this.comptParams.custIdNumber = this.accountTaskParams.custCardNo
    this.comptParams.loanId = this.accountTaskParams.loanId
    // console.info(this.accountTaskParams)
    this.loadAccountInfo()
  },
  methods: {
    dataShow: function (tagId) {
      var clickTag = document.getElementById(tagId)
      if (clickTag.className === 'main_item_content') {
        clickTag.className = 'main_item_content_block'
        document.getElementById(tagId + '_icon').className = 'ivu-icon ivu-icon-md-arrow-dropup'
      } else {
        clickTag.className = 'main_item_content'
        document.getElementById(tagId + '_icon').className = 'ivu-icon ivu-icon-md-arrow-dropdown'
      }
    },
    loadAccountInfo: function () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/collection/manage/service/selectAccountInfo', vm.comptParams).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        vm.financeAccount = data.data
        var status = ''
        switch (vm.financeAccount.status) {
          case 0:
            status = '正常'
            break
          case 1:
            status = '逾期'
            break
          case 2:
            status = '结清'
            break
          case 3:
            status = '提前结清'
            break
          case 10:
            status = '核销'
            break
          default:
            status = ''
        }
        vm.financeAccount.status = status
        vm.financingAccountData = []
        vm.financingAccountData.push({ typeCommon: '已还', principalCommon: vm.financeAccount.principal, interestCommon: vm.financeAccount.interest, consultingFeeCommon: vm.financeAccount.consultingFee, managementFeeCommon: vm.financeAccount.managementFee, penaltyFeeCommon: vm.financeAccount.penaltyFee, lateFeeCommon: vm.financeAccount.lateFee })
        vm.financingAccountData.push({ typeCommon: '未还', principalCommon: vm.financeAccount.financeAccount, interestCommon: vm.financeAccount.interestOs, consultingFeeCommon: vm.financeAccount.consultingFeeOs, managementFeeCommon: vm.financeAccount.managementFeeOs, penaltyFeeCommon: vm.financeAccount.penaltyFeeOs, lateFeeCommon: vm.financeAccount.lateFeeOs })
      }).catch(er => {

      })
    }
  },
  props: {
    accountTaskParams: Object
  }
}
</script>
<style lang="less">
.row-col-style {
  color: #767676;
  font-family: 微软雅黑;
  font-size: 12px;
  border: #e6e6e6 1px solid;
}
.lightBlue {
  color: #767676;
  font-family: 微软雅黑;
  font-size: 12px;
  border: #e6e6e6 1px solid;
}
</style>
